<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>练习</title>
  <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
  <script>
    $(function () {
      // 页面加载时初始化一个值
      let i = 1;
      $("#more").click(function () {
        let d = $("#d").clone(true);
        d.attr("id", "d" + i);
        $(this).before(d);
        // 将新增区域的文件选择器的值清除
        $("#d" + i + " input").val("");
        i++;
      })

      $("a").click(function () {
        if ($(this).parent().attr("id") != "d") {
          $(this).parent().remove();
        }
      })
      $("#print").click(function (){
      //   直接输出只打印第一个元素
      //   console.log($("input[type='file']").val())
      //   因此我们要做遍历操作
      //   语法：jquery对象.each(fn)   fn函数可以无参
        $("input[type=file]").each(function (){
        //   如果是无参可以通过this代表当前迭代元素  this是一个DOM对象
          console.log($(this).val())
        })
        // fn可以有参数,当只有一个参数的时候,该参数表示当前迭代的元素的索引号
        $("input[type='file']").each(function (i){
        console.log("索引号为:"+i+",元素为:"+$(this).val())
        })
      //   两个参数 参数一索引 参数二迭代对象
        $("input[type='file']").each(function(i,e){
          // 如果无参,可以通过this关键字表示当前迭代的元素
          // this是一个DOM对象
          console.log("索引号为:"+i+",元素为:"+$(e).val())
        })
      })
    })
  </script>
</head>
<body>
<div id="d">
  <input type="file">
  <a href="javascript:;">删除</a>
</div>
<button id="more">上传更多</button>
<button id="print">打印文件名</button>
</body>
</html>